<template>
    <a-layout-header>
        <div class="inner-wrp">
            <div class="logo"/>
            <a-menu
                    @click="handleClick"
                    theme="dark"
                    mode="horizontal"
                    :defaultSelectedKeys="['1']"
                    style="lineHeight: 64px;width: 600px ;float: left">
                <a-menu-item key="main">首页</a-menu-item>
                <a-menu-item key="docs">开发文档</a-menu-item>
                <a-menu-item key="home">管理中心</a-menu-item>
            </a-menu>

            <a-menu
                    @click="handleClick2"
                    theme="dark"
                    mode="horizontal"
                    :defaultSelectedKeys="['1']"
                    style="lineHeight: 64px;width: 350px; float: right }">
                <a-menu-item key="login">登录</a-menu-item>
                <a-menu-item key="register">注册</a-menu-item>
                <a-menu-item key="into">免费入住</a-menu-item>
            </a-menu>
        </div>

        <div>
            <a-modal
                    :footer="null"
                    v-model="visible"
                    title="登录"
                    width="456px"
                    >
                <a-form
                        id="login-form"
                        :form="form"
                        class="login-form"
                        @submit="handleSubmit">
                    <a-form-item>
                        <a-input
                                v-decorator="[ 'userName',  { rules: [{ required: true, message: 'Please input your username!' }] }]"
                                placeholder="Username">
                            <a-icon
                                    slot="prefix"
                                    type="user"
                                    style="color: rgba(0,0,0,.25)"
                            />
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-input
                                v-decorator="[ 'password',{ rules: [{ required: true, message: 'Please input your Password!' }] }]"
                                type="password"
                                placeholder="Password">
                            <a-icon
                                    slot="prefix"
                                    type="lock"
                                    style="color: rgba(0,0,0,.25)"
                            />
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-checkbox v-decorator="['remember',{valuePropName: 'checked',initialValue: true,}]">
                         记住账号
                        </a-checkbox>
                        <a class="login-form-forgot" href="#">忘记密码</a>
                            <a-button type="primary" html-type="submit"  class="login-form-button">
                                登录
                            </a-button>
                            <a href="#">
                                立即注册
                             </a>
                    </a-form-item>
                </a-form>
            </a-modal>
        </div>
    </a-layout-header>

</template>

<script>
    export default {
        name: 'Header',
        data() {
            return {
                loading: false,
                visible: false,
            }
        },
        beforeCreate () {
            this.form = this.$form.createForm(this);
        },
        methods: {
            showModal() {
                this.visible = true;
            },
            handleSubmit (e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values);
                    }
                });
            },
            handleClick (e) {
                this.$router.push({name: e.key})
            },
            handleClick2(e){
                switch (e.key) {
                    case'register':
                        break
                    case 'login':
                        this.showModal()
                        break
                }

            }
        }
    }
</script>
<style scoped>
    .logo {
        width: 120px;
        height: 31px;
        background: rgba(255, 255, 255, .2);
        margin: 16px 24px 16px 0;
        float: left;
    }

    .ant-menu.ant-menu-dark .ant-menu-item-selected, .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
        background-color: inherit;
    }

    #login-form .login-form {
        max-width: 300px;
    }

    #login-form .login-form-forgot {
        float: right;
    }

    #login-form .login-form-button{
        width: 100%;
    }
</style>